<template>
  <rx-layout>
    <div slot="center">
      <a-form :form="form" style="height: 100%;">
        <a-row>
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.dialog','对话框')">
              <rx-input-button ref="dialog" @click="selectDialog" v-decorator="['dialog',{rules: [{ required: true, message: i18n('tips.dialogMsg2','请选择对话框') }] }]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.textInput','允许文本输入')">
              <a-checkbox :placeholder="i18n('form.textInput','允许文本输入')" v-decorator="['allowinput']" :checked="mdl.allowinput" @change="changeData($event,'allowinput')">{{i18n('form.yes','是')}}</a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.showClose','显示清除')">
              <a-checkbox :placeholder="i18n('form.showClose','显示清除')" v-decorator="['showclose']" :checked="mdl.showclose" @change="changeData($event,'showclose')">{{i18n('form.yes','是')}}</a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.valueField','绑定值字段')">
              <a-select :options="sqlFields" v-decorator="['valueField']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item :label-col="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.bindReturnVal','返回值绑定')">
              <div class="table-operator">
                <a-button @click="removeRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
              </div>
              <rx-grid ref="returnFields"
                       :bordered="true"
                       :allowRowSelect="true"
                       :multiSelect="true"
                       style="min-height:300px;"
                       :dataSource="dataSource"
                       :columns="columns"
                       :enableHtmlEscape="false"
                       :showPage="false">
            <span slot="bindField" slot-scope="{text,record,index,blur}">
              <a-select labelInValue :options="fieldDatas" v-model="record.bindField" @blur="blur(index,'bindField',text,record)" />
            </span>
              </rx-grid>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </rx-layout>
</template>

<script>

    import {Dialog} from "@lowcode/jpaas-common-lib";
    import FormBoListApi from "@/api/form/core/formBoList";

    export default {
        name: "rowControl_dialog",
        data(){
          return {
            labelCol: { span:6 },
            wrapperCol: { span:18 },
            labelCol1: { span:3 },
            wrapperCol1: { span:19 },
            form: this.$form.createForm(this),
            mdl:{},
            sqlFields:[],
            fieldDatas:[],
            dataSource:[],
            columns:[
              {title: this.i18n('form.returnField','返回字段'), dataIndex: 'field',displayField:'header', width: 120,scopedSlots: {customRender: 'field'}},
              {title: this.i18n('form.bindFields','绑定字段'), dataIndex: 'bindField',displayField: 'bindFieldName', width: 120,allowCellEdit:true,scopedSlots: {customRender: 'bindField'}}
            ]
          }
        },
      methods:{
          i18n(name, text, key) {
              return this.$ti18(name, text, "rowControls", key);
          },
          setData(controlConf,fieldDats){
              this.mdl=controlConf;
              this.fieldDatas=fieldDats;
              this.$refs.dialog;
              this.$refs.dialog.setVal(this.mdl.dialog,this.mdl.dialog_name);
              this.sqlFields = this.mdl.sqlFields || [];
              var returnFields=this.mdl.returnFields || '[]';
              this.dataSource=JSON.parse(returnFields);
              this.form.setFieldsValue(this.mdl)
        },
        validate(callback){
          var self=this;
          this.form.validateFields((err, values) => {
            if(err){
              return;
            }
            self.mdl=values;
            callback();
          });
        },
        getData(){
          var dialog = this.$refs.dialog.getVal();
          this.mdl.dialog=dialog.value;
          this.mdl.dialog_name=dialog.text;
          this.mdl.sqlFields=this.sqlFields;
          this.mdl.returnFields = JSON.stringify(this.$refs.returnFields.getData());
          return this.mdl;
        },
        changeData(e,field){
          this.mdl[field]=e.target.checked;
        },
        removeRow(){
          this.$refs.returnFields.removeRows();
        },
        selectDialog(vm){
          Dialog.openFormBoListDialog({
            curVm: this, widthHeight: ['800px', '600px'],data:{isDialog:'YES'}
          }, function (self, data) {
            var item=data[0];
            self.loadFields(item,self);
            vm.setVal(item.key,item.name);
          })
        },
        loadFields(row,self){
          FormBoListApi.get(row.pkId).then(res=>{
            var data=res.data;
            var fieldsStr=data.fieldsJson;
            if(!fieldsStr) return;
            var fileds=JSON.parse(fieldsStr);
            var ary=[];
            fileds.map(function(item){
              if(item.isReturn) {
                ary.push({
                  value: item.field,
                  label: item.header
                })
                self.dataSource.push({field:item.field,header:item.header,bindField:""});
              }
            })
            self.sqlFields=ary;
          })
        }
      }
    }
</script>

<style scoped>

</style>